<template>
<el-dialog :visible.sync="dialogVisible" @close="close" width="80%">
    <el-form :model="queryForm" ref="queryForm" label-width="80px">
        <h4>添加</h4>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="资产名称" prop="assetName">
                    <el-input v-model="queryForm.assetName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="资产编码" prop="number">
                    <el-input v-model="queryForm.number"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="资产分类" prop="assetCategoryId">
                    <el-select v-model="queryForm.assetCategoryId" placeholder="请选择" @focus="fetchCategories">
                        <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="16">
                <el-form-item label="存放位置" prop="locationId">
                    <el-input v-model="queryForm.locationId"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="4">
            <el-col :span="2">
                <el-button type="primary" @click="submitQuery">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="resetQuery">重置</el-button>
            </el-col>
        </el-row>
    </el-form>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
        <el-table-column prop="assetName" label="资产名称" width="160">
        </el-table-column>
        <el-table-column prop="number" label="资产编码" width="180"/>
        <el-table-column prop="model" label="规格型号" width="180"/>
        <el-table-column prop="kind" label="资产分类" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="nowLocation" label="存放地点" width="180"/>
        <el-table-column prop="assetStatus" label="状态" :formatter="formatStatus" />
    </el-table>
    <el-row>
        <span>已选择{{ selectionCount }}项</span>
    </el-row>
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[7, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 弹层内容 -->
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="confirm">确定</el-button>
</el-dialog>
</template>

    
<script>
import assetClaimApi from '@/api/asset-claim';
import { assetCategory } from '@/api/assetCategory';

export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogVisible: true,
            selectionCount: 0, // 统计选择了几项
            categories: [],
            assetIds: [],
            queryForm: {
                assetName: '',
                number: '',
                assetCategoryId: '',
                locationId: ''
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        indexMethod(index) {
            return (index + 1) + (this.currentPage - 1) * this.pageSize; // 返回从1开始的索引
        },
        fetchData() {
            assetClaimApi.findClaimFixed({
                    page: this.currentPage,
                    limit: this.pageSize
                })
                .then(response => {
                    this.tableData = response.data
                    this.total = response.count
                })
                .catch(error => console.log(error))
        },
        handleSelectionChange(selection) {
            this.selectionCount = selection.length
            this.assetIds = selection.map(item => item.id)
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize
            this.fetchData()
        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage
            this.fetchData()
        },
        submitQuery() {
            // 提交查询逻辑
            assetClaimApi.findClaimFixed({
                    page: this.currentPage,
                    limit: this.pageSize,
                    ...this.queryForm // 使用扩展运算符传递整个 queryForm 对象
                })
                .then(response => this.tableData = response.data)
                .catch(error => console.log(error))
        },
        resetQuery() {
            this.$refs['queryForm'].resetFields();
        },
        exportData() {

        },
        close() {
            this.cancel()
            this.confirm()
        },
        cancel() {
            this.dialogVisible = false;
            this.assetIds = []
            this.$emit('close'); // 触发 close 事件，通知父组件关闭弹层
        },
        confirm() {
            this.dialogVisible = false;
            // 当用户点击提交按钮时，发射一个事件，并传递数据
            this.$emit('data-submitted', this.assetIds);
            this.$emit('close'); // 触发 close 事件，通知父组件关闭弹层
        },
        fetchCategories() {
            assetCategory.findAll()
                .then(response => this.categories = response.data)
                .catch(error => console.log(error))
        },
        formatStatus(row, column, cellValue) {
            // 根据assetStatus的值来返回不同的文本
            if (cellValue === 2) {
                return '闲置';
            }
            // 默认返回原始值或其他文本
            return '数据有误！';
        }

    }
}
</script>
